<template>
  <div class="app-container2 yuce_baobiao">
    <div class="top">
      <el-form inline>
        <el-form-item label="开始结束时间">
          <el-date-picker class="jk_common_date_picker000" v-model="form.time" size="small" style="width: 200px"
            value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="设备类型" class="ml-20">
          <el-select clearable class="js_common_select" :popper-append-to-body="false" filterable
            v-model="form.deviceTypeCode">
            <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.deviceTypeName"
              :value="item.deviceTypeCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模型类型" class="ml-20">
          <el-select clearable class="js_common_select" :popper-append-to-body="false" placeholder="请选择"
            v-model="form.modelType">
            <el-option label="健康度模型" value="health"></el-option>
            <el-option label="可靠度模型" value="reliable"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称" class="ml-20">
          <el-input class="js_common_input" v-model="form.deviceName">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="bottom">
        <el-button class="js_common_btn" @click="queryBtn">预测结果查询</el-button>
        <el-button class="js_common_btn" @click="exportBtn">预测结果导出</el-button>
      </div>
    </div>
    <div class="content">
      <EasyTable :tableData="tableData" :colsData="colsData" :actions="actions" :tableLoading="tableLoading"
        @delete="deleteBtn" @detail="showDetailDialog"></EasyTable>
    </div>
    <div class="fenye_main">
      <CommonPagination :page="page" @pageChange="queryBtn"></CommonPagination>
    </div>
    <el-dialog title="预测结果详情" :visible.sync="detailDialogVisible" width="500px" :before-close="handleClose">
      <!-- <pre>{{ detailData }}</pre> -->
      <div class="title-modal">
        <span class="line_span">回归模型</span>
      </div>
      <template v-if="detailData.modelParam">
        <p class="p_info" v-for="item in Object.keys(JSON.parse(detailData.modelParam)) ">{{ item }} <span
            style="margin-left: 30px;">{{
            JSON.parse(detailData.modelParam)[item] }}</span>
        </p>
      </template>
      <hr color="#606266" size="1">
      <template v-if="detailData.forecasttDetail">
        <p class="p_info" v-for="item in Object.keys(JSON.parse(detailData.forecasttDetail|| '{}'))">
          {{ item }} <span style="margin-left: 10px;">= &nbsp;&nbsp;{{ JSON.parse(detailData.forecasttDetail|| '{}')[item]  }}</span>
        </p>
      </template>
      <p class="p_info">
        <span>输出变量值:</span>
        <span style="margin-left: 20px;">{{ detailData.forecasttResult }}</span>
      </p>
    </el-dialog>
  </div>
</template>
<script>
import EasyTable from "./EasyTable";
import CommonPagination from "@/components/CommonPagination/index";
import * as api from "@/api/myApi/yc_baobiao";
export default {
  name: "",
  components: { EasyTable, CommonPagination },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        time: [],
        deviceTypeCode: "",
        modelType: "",
        deviceName: "",
      },
      tableData: [],
      colsData: [
        {
          label: "设备名称",
          prop: "deviceName",
          // width: 180,
        },
        {
          label: "设备编码",
          prop: "deviceCode",
          // width: 180,
        },
        {
          label: "设备类型",
          prop: "deviceTypeName",
          // width: 180,
        },
        {
          label: "模型类型",
          prop: "modelType",
          width: 120,
          filter: (type) => {
            return type == "health" ? "健康度预测模型" : "可靠度预测模型";
          },
        },
        {
          label: "模型名称",
          prop: "modelName",
          width: 450
        },
        {
          label: "预测时间",
          prop: "forecastTime",
          width: 160,
          align: 'center'
        },
        {
          label: "预测结果",
          prop: "forecasttResult",
          width: 170,
          align: 'center'
        },
      ],
      actions: [
        {
          action: "detail",
          name: "详情",
          icon: "el-icon-circle-plus-outline",
        },
        {
          action: "delete",
          name: "删除",
          icon: "el-icon-delete",
        },
      ],
      tableLoading: false,
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      detailDialogVisible: false,
      detailData: {
        forecasttDetail: "",
        forecasttResult: '',
        modelParam: ''
      },
    };
  },
  computed: {
    deviceTypeList: function () {
      return this.$store.getters.deviceTypeTree
        ? this.$store.getters.deviceTypeTree.children
        : [];
    },
  },
  methods: {
    queryBtn() {
      this.tableLoading = true;
      api
        .getList({
          deviceTypeCode: this.form.deviceTypeCode,
          modelType: this.form.modelType,
          deviceName: this.form.deviceName,
          startTime: this.form.time ? this.form.time[0] : null,
          endTime: this.form.time ? this.form.time[1] : null,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.rows;
            this.page.total = res.total;
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    exportBtn() {
      let fileName = "预测结果" + new Date().getTime() + ".xlsx";
      api
        .exportList(fileName, {
          deviceTypeCode: this.form.deviceTypeCode,
          modelType: this.form.modelType,
          deviceName: this.form.deviceName,
          startTime: this.form.time ? this.form.time[0] : null,
          endTime: this.form.time ? this.form.time[1] : null,
        })
        .then((res) => {
          if (res.code === 200) {
            this.$modal.msgSuccess(res.msg);
          }
        });
    },
    deleteBtn(row) {
      console.log(row);
      api.deleteOne(row.id).then((res) => {
        if (res.code === 200) {
          this.$modal.msgSuccess(res.msg);
          this.queryBtn();
        }
      });
    },
    showDetailDialog(row) {
      console.log(row, "00")
      this.detailData = row
      setTimeout(() => {
        this.detailDialogVisible = true;
      }, 200);
      // this.detailData = JSON.parse(row.forecasttDetail);
    },
    handleClose() {
      this.detailDialogVisible = false;
      this.detailData = "";
    },
  },
  created() { },
  mounted() {
    if (!this.$store.getters.deviceTypeTree) {
      this.$store.dispatch("getDeviceTypeTree");
    }
    this.queryBtn();
  },
};
</script>
<style lang="scss" scoped>
.app-container2 {
  width: 100%;
  display: flex;
  height: 100%;
  box-sizing: border-box;
}
.yuce_baobiao {
  //background: linear-gradient(180deg,
  //    rgba(21, 52, 104, 0.3) 0%,
  //    rgba(12, 29, 57, 0.3) 100%);
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;

  ::v-deep .top {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;

    .bottom {
      // width: 300px;
      flex: 0 0 auto;
    }

    .el-date-editor.el-range-editor.el-input__inner {
      width: 260px !important;
    }

    .el-select input {
      width: 150px;
    }

    .el-input input {
      width: 150px !important;
    }
  }

  .content {
    flex: 1;
  }

  .fenye_main {
    flex: 0 0 auto;
    margin-top: 18px;
  }
}

.ml-20 {
  margin-left: 20px;
}

.title-modal {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.line_span {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: 114%;
    top: 50%;
    bottom: 0;
    width: 180px;
    height: 1px;
    background: linear-gradient(270deg, #c8ccd4, #5e6065);
  }

  &::after {
    content: "";
    position: absolute;
    left: 114%;
    top: 50%;
    bottom: 0;
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, #c8ccd4, #5e6065);
  }
}

.p_info {
  padding: 0 0 0 30px;
}
</style>
